<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never" style="margin-bottom:24px;">
            <el-row>
                <i class="el-icon-search"></i>
                <span class="search-title">筛选条件</span>
            </el-row>
            <el-row class="row-margin">
                <el-form ref="filterFormRef1" inline :model="listQuery1">
                    <el-form-item prop="categoryId">
                        <el-cascader
                            v-model="listQuery1.categoryId"
                            :options="categoryList"
                            :props="{ checkStrictly: false, emitPath: false }"
                            placeholder="商品分类"
                            clearable
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item prop="supplierId">
                        <el-select v-model="listQuery1.supplierId" placeholder="全部供货商">
                            <el-option
                                v-for="item in supplierList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="nameOrCode">
                        <el-row type="flex">
                            <el-input
                                placeholder="商品名称/商品编码"
                                v-model="listQuery1.nameOrCode"
                            >
                            </el-input>
                        </el-row>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            @click="handleSearchList1()"
                            style="margin-left:10px"
                            >查询</el-button
                        >
                        <el-button @click="handleResetSearch1()" style="margin-left:10px"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-row>
        </el-card>
        <el-table :data="productList" style="width: 100%" border ref="productListInfo">
            <el-table-column label="商品/价格" width="300" align="center">
                <template slot-scope="scope">
                    <el-row type="flex" justify="center">
                        <el-avatar shape="square" :size="50" :src="scope.row.resourceUrl">
                            <img :src="scope.row.resourceUrl" />
                        </el-avatar>
                        <div class="goods-info">
                            <div class="goods-name" :title="scope.row.name">
                                {{ scope.row.goodsName }}
                            </div>
                            <div>
                                <span class="goods-price"
                                    >￥ {{ formatMoney(scope.row.sellPrice) }}</span
                                >
                                <span class="goods-unit" :title="scope.row.unit">{{
                                    scope.row.unit
                                }}</span>
                            </div>
                        </div>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column label="供货价" prop="supplyPrice" align="center">
                <template slot-scope="scope">
                    <span>￥ {{ formatMoney(scope.row.supplyPrice) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="供货商" prop="supplierName" align="center">
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.supplierName }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="团长分佣" prop="commission" align="center">
                <template slot-scope="scope">
                    <span>￥ {{ formatMoney(scope.row.commission) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="仓库库存" prop="totalStock" align="center">
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.totalStock }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="handleOpenAddSalingModal(scope.row.goodsId, scope.row)"
                        >发布销售</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                layout="total, sizes,prev, pager, next,jumper"
                :page-size="listQuery1.pageSize"
                :page-sizes="[5, 10, 15]"
                :current-page.sync="listQuery1.pageNum"
                :total="total1"
            >
            </el-pagination>
        </div>
        <el-dialog :visible.sync="addSalingModalVisible" width="50%" title="请确认销售策略">
            <el-row type="flex" style="margin-bottom: 12px;">
                <el-avatar shape="square" :size="50" :src="pendingForm.resourceUrl">
                    <img :src="pendingForm.resourceUrl" />
                </el-avatar>
                <div class="goods-info">
                    <div class="goods-name" :title="pendingForm.goodsName">
                        {{ pendingForm.goodsName }}
                    </div>
                    <div>
                        <span class="goods-price">￥ {{ formatMoney(pendingForm.sellPrice) }}</span>
                        <span class="goods-unit" :title="pendingForm.unit">{{
                            pendingForm.unit
                        }}</span>
                    </div>
                </div>
            </el-row>
            <el-form ref="addSalingFormRef" :model="addSalingForm" :rules="addSalingFormRule">
                <el-row type="flex" justify="space-between">
                    <el-form-item label="商品售价">
                        <el-input :value="pendingForm.sellPrice" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="供货商价格">
                        <el-input :value="pendingForm.supplyPrice" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="团长佣金">
                        <el-input :value="pendingForm.commission" disabled></el-input>
                    </el-form-item>
                </el-row>
                <el-row type="flex" justify="space-between">
                    <el-form-item prop="times" label="销售时间" required>
                        <el-date-picker
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="addSalingForm.times"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item prop="limitOrderCount" label="每人限购" required>
                        <el-input v-model="addSalingForm.limitOrderCount"></el-input>
                    </el-form-item>
                </el-row>
                <el-row type="flex">
                    <el-form-item
                        prop="takeGoodsDays"
                        label="提货时间"
                        style="margin-right:24px"
                        required
                    >
                        <el-select v-model="addSalingForm.takeGoodsDays" placeholder="提货时间">
                            <el-option label="次日" :value="1"></el-option>
                            <el-option label="第三天" :value="2"></el-option>
                            <el-option label="第四天" :value="3"></el-option>
                            <el-option label="第五天" :value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="totalGoodsCount" label="活动总数量" required>
                        <el-input v-model="addSalingForm.totalGoodsCount"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="onCreateSaling" type="primary">确认发布</el-button>
                <el-button @click="addSalingModalVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getCateList, getSupplierList, getUnsaleGoodsList } from '@/api/goodsBase';
import { addSaling } from '@/api/activity';
import { formatMoney } from '@/utils/goods';
const defaultListQuery = {
    categoryId: null,
    supplierId: null,
    nameOrCode: '',
    pageNum: 1,
    pageSize: 5
};
export default {
    components: {},
    mounted() {},
    data() {
        return {
            addSalingModalVisible: false,
            pendingForm: {
                resourceUrl: '',
                goodsName: '',
                unit: '',
                sellPrice: ''
            },
            addSalingForm: {
                goodsId: null,
                goodsSkuId: null,
                times: null,
                startTime: null,
                endTime: null,
                limitOrderCount: null,
                takeGoodsDays: null,
                totalGoodsCount: null
            },
            addSalingFormRule: {
                limitOrderCount: [{ required: true, message: '请填写每人限购', trigger: 'blur' }],
                takeGoodsDays: [{ required: true, message: '请选择提货时间', trigger: 'blur' }],
                totalGoodsCount: [{ required: true, message: '请填写活动总数量', trigger: 'blur' }],
                times: [
                    {
                        type: 'array',
                        required: true,
                        message: '请选择销售日期范围',
                        trigger: 'change'
                    }
                ]
            },
            supplierList: [],
            categoryList: [],
            productList: [],
            listLoading1: false,
            listQuery1: Object.assign({}, defaultListQuery),
            total1: 0
        };
    },
    created() {
        this.fetchCategoryList();
        this.fetchSupplierList();
        this.getTableList(this.listQuery1);
    },
    methods: {
        fetchCategoryList() {
            getCateList().then(res => {
                if (res.data && res.data.success == true) {
                    let list = res.data.data;
                    this.categoryList = list.map(el => {
                        return {
                            value: el.category.id,
                            label: el.category.name,
                            children: el.detailList.map(el => {
                                return { value: el.categoryId, label: el.name };
                            })
                        };
                    });
                } else {
                    this.categoryList = [];
                }
            });
        },
        fetchSupplierList() {
            getSupplierList().then(res => {
                let resdata = res.data;
                if (resdata && resdata.success) {
                    this.supplierList = resdata.data;
                } else {
                    this.supplierList = [];
                }
            });
        },
        getTableList(queryData) {
            getUnsaleGoodsList(queryData).then(res => {
                if (res.data && res.data.success) {
                    this.productList = res.data.data;
                    this.total1 = res.data.extra.total;
                } else {
                    this.productList = [];
                }
            });
        },
        handleOpenAddSalingModal(goodsId, detail) {
            this.addSalingForm.goodsId = goodsId;
            this.addSalingForm.goodsSkuId = detail.goodsSkuId;
            this.pendingForm = {
                ...detail
            };
            this.addSalingModalVisible = true;
        },
        onCreateSaling() {
            addSaling(this.addSalingForm).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '创建销售成功!',
                        type: 'info',
                        duration: 1000
                    });
                    this.getTableList(this.listQuery1);
                    this.addSalingModalVisible = false;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleSearchList1() {
            this.listQuery1.pageNum = 1;
            this.getTableList(this.listQuery1);
        },
        handleResetSearch1() {
            this.$refs.filterFormRef1.resetFields();
        },
        handleSizeChange1(val) {
            this.listQuery1.pageNum = 1;
            this.listQuery1.pageSize = val;
            this.getTableList(this.listQuery1);
        },
        handleCurrentChange1(val) {
            this.listQuery1.pageNum = val;
            this.getTableList(this.listQuery1);
        },
        formatMoney(num) {
            return formatMoney(num);
        }
        // formatDate(dates) {
        //     this.addSalingForm.startTime =
        //         typeof dates[0] === 'object'
        //             ? safeJsonStringify(dates[0]).replace(/\"/g, '')
        //             : undefined;
        //     this.addSalingForm.endTime =
        //         typeof dates[1] === 'object'
        //             ? safeJsonStringify(dates[1]).replace(/\"/g, '')
        //             : undefined;
        // }
    }
};
</script>
<style lang="scss" scoped></style>
